﻿<Page x:Class="NewMarkersSample.Pages.AcceptableRangePage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	  		xmlns:wpf="http://schemas.microsoft.com/wpf/2008/toolkit"
	  xmlns:d3="http://research.microsoft.com/DynamicDataDisplay/1.0"
    Title="Acceptable Ranges" Loaded="Page_Loaded">
	<Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*"/>
			<ColumnDefinition Width="Auto"/>
		</Grid.ColumnDefinitions>

		<d3:ChartPlotter Name="plotter" Grid.Column="0" Visible="-3,-7 41,11">

			<Grid Canvas.Top="10" Canvas.Right="10">
				<Rectangle RadiusX="2" RadiusY="2" Stroke="LightGray" StrokeThickness="1" Fill="White" Opacity="0.7"/>
				<TextBlock Margin="5,0,5,5" FontSize="14" VerticalAlignment="Center" TextAlignment="Right">
					You can edit values in <Bold>DataGrid</Bold> here <Run FontSize="26">→</Run>
					<LineBreak/>
					All changes will immediately be reflected in chart,
					<LineBreak/>
					because each range implements <Run Foreground="Green" FontFamily="Consolas">INotifyPropertyChanged</Run> interface.
				</TextBlock>
			</Grid>

			<d3:CursorCoordinateGraph/>

			<d3:MarkerChart Name="markerChart3" ItemsSource="{Binding}">
				<d3:MarkerChart.ItemsPanel>
					<ItemsPanelTemplate>
						<d3:ViewportMarginPanel/>
					</ItemsPanelTemplate>
				</d3:MarkerChart.ItemsPanel>

				<d3:MarkerChart.MarkerBuilder>
					<d3:TemplateMarkerGenerator>
						<DataTemplate>
							<DataTemplate.Resources>
								<d3:AcceptableRangeMultiConverter x:Key="multiConverter"/>
							</DataTemplate.Resources>

							<Grid d3:ViewportPanel.X="{Binding X}"
										  d3:ViewportPanel.Y="{Binding YMin}"
										  d3:ViewportPanel.ViewportWidth="0.4"
										  d3:ViewportPanel.MinScreenWidth="10"
										  d3:ViewportPanel.ViewportHorizontalAlignment="Stretch"
										  d3:ViewportPanel.ViewportVerticalAlignment="Bottom">
								<d3:ViewportPanel.ViewportHeight>
									<MultiBinding Converter="{StaticResource multiConverter}">
										<Binding Path="YMin"/>
										<Binding Path="YMax"/>
									</MultiBinding>
								</d3:ViewportPanel.ViewportHeight>

								<Path Stroke="Green" StrokeThickness="1" Stretch="Fill">
									<Path.Data>
										<GeometryGroup>
											<LineGeometry StartPoint="-1,1" EndPoint="1,1"/>
											<LineGeometry StartPoint="0,1" EndPoint="0,-1"/>
											<LineGeometry StartPoint="-1,-1" EndPoint="1,-1"/>
										</GeometryGroup>
									</Path.Data>
								</Path>

							</Grid>
						</DataTemplate>
					</d3:TemplateMarkerGenerator>
				</d3:MarkerChart.MarkerBuilder>
			</d3:MarkerChart>
		</d3:ChartPlotter>

		<wpf:DataGrid Name="dataGrid" Grid.Column="1" HorizontalAlignment="Center" AutoGenerateColumns="False"
					  ItemsSource="{Binding}" VerticalScrollBarVisibility="Auto">
			<wpf:DataGrid.Columns>
				<wpf:DataGridTextColumn Header="X" Binding="{Binding X}"/>
				<wpf:DataGridTextColumn Header="YMin" Binding="{Binding YMin}"/>
				<wpf:DataGridTextColumn Header="YMax" Binding="{Binding YMax}"/>
			</wpf:DataGrid.Columns>
		</wpf:DataGrid>
	</Grid>
</Page>
